<template>
  <div class="f-wrapper">
    <!-- <div class="f-menu f-menu--left"></div> -->
    <div class="f-menu--nav-btn">
      <div class="f-menu--nav-btn__content">
        <a href="http://10.6.240.63:9999/zongzhan"> 总站 </a>
      </div>
      <div
        :class="{ 'f-menu--nav-btn__content': true, active: true }"
        @click="backToHome"
      >
        海航图
      </div>
    </div>
    <div class="f-map__wrapper">
      <world-map :scale="scale" :origin="origin" @wheel:update="onWheelUpdate">
        <ocean-path
          v-for="(p, i) in paths"
          :key="'path' + i"
          :coordinates="p"
          :rotate-y="i < 6"
          :stroke-width="strokeWidth"
          :no-dest="i === 6"
        ></ocean-path>
        <image
          width="6px"
          height="6px"
          class="f-dest--icon"
          :x="destCoords[0]"
          :y="destCoords[1]"
          style="transform: translate(-3px, -3px)"
          :xlink:href="destIcon"
        ></image>
      </world-map>
    </div>
    <!-- <div class="f-menu f-menu--right"></div> -->
  </div>
</template>

<script>
import OceanPath from '../../components/OceanPath.ts';
import destIcon from '../../assets/images/chart-icon4.png';
import {
  EU_PATH,
  AF_PATH,
  AU_PATH,
  NA_PATH1,
  SA_PATH,
  NA_PATH,
  MA_PATH,
  ME_PATH,
  JK_PATH,
  SEA_PATH,
  SA_PATH1,
  NJ_PATH,
  RU_PATH,
} from './path.js';
import WorldMap from '../../components/WorldMap.ts';
import { calculateX, calculateY } from '../../composables/useConvertMap.ts';

const SH_COORDS = [121.47, 31];
const PATHS = [
  EU_PATH,
  ME_PATH,
  AF_PATH,
  AU_PATH,
  MA_PATH,
  RU_PATH,

  NA_PATH1,
  SA_PATH1,
  SA_PATH,
  NA_PATH,
  JK_PATH,
  SEA_PATH,
  NJ_PATH,
];
export default {
  name: 'Ocean',
  components: {
    WorldMap,
    OceanPath,
  },
  data() {
    return {
      paths: PATHS,
      scale: 1.5,
      origin: [calculateX(0), calculateY(0)],
      destIcon,
    };
  },
  computed: {
    strokeWidth() {
      const scale = 1 / this.scale;
      return scale * 0.8;
    },
    destCoords() {
      return [calculateX(SH_COORDS[0]), calculateY(SH_COORDS[1])];
    },
  },
  methods: {
    onWheelUpdate(obj) {
      if (obj.scale) {
        this.scale = obj.scale;
      }
    },
    backToHome() {
      this.$route.push('/');
    },
  },
};
</script>